<template>
  <div class="main-content">
    <div class="button-container">
      <!-- 循环展示所有图标 -->
      <TubiaoComponent
        v-for="(item, index) in functionItems"
        :key="index"
        :item="item"
        @click="navigateTo(item.title)"
      />
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import TubiaoComponent from '../components/tubiao.vue';

const functionItems = [
  { title: '食物热量查询', subTitle: 'Food Calorie Query' },
  { title: '营养成分分析', subTitle: 'Nutrition Analysis' },
  { title: '饮食计划制定', subTitle: 'Diet Plan Formulation' },
  { title: '食谱推荐', subTitle: 'Recipe Recommendation' },
  { title: '饮食禁忌提醒', subTitle: 'Ingredient Matching Suggestion' },
  { title: '健康饮食小贴士', subTitle: 'Healthy Diet Tips' },
  { title: '体重管理', subTitle: 'Weight Management' },
  { title: '运动建议', subTitle: 'Exercise Recommendation' },
  { title: '饮食记录', subTitle: 'Diet Record' }
];

const router = useRouter();

const navigateTo = (title) => {
  const pathMap = {
    '食物热量查询': '/shiwureliangchaxun',
    '营养成分分析': '/yingyangchengfenfenxi',
    '饮食计划制定': '/yinsijihuazhiding',
    '食谱推荐': '/shiputuijian',
    '饮食禁忌提醒': '/yinshijinjitixing',
    '健康饮食小贴士': '/jiankangyinshixiaotieshi',
    '体重管理': '/tizhongguanli',
    '运动建议': '/yundongjianyi',
    '饮食记录': '/yinshijilu'
  };
  const path = pathMap[title];
  path && router.push(path);
};
</script>

<style scoped>
.main-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}

.button-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 40px;
  width: 100%;
  max-width: 1000px; /* 调整最大宽度 */
  margin-top: 30px;
  box-sizing: border-box;
  padding: 0; /* 移除左侧偏移 */
}
</style>